<script setup lang="ts">
// 表单
import { reactive, ref, onMounted } from "vue";
import type { TabsPaneContext } from "element-plus";
import { ClassStore } from "@/stores/BackData/ClassManage/class";
import router from "@/router";
import { getHMS } from "@/utils/time";
import { classBasic } from "@/stores/BackData/ClassManage/classBasic";

// 请求
import { splitPage } from "@/api/teacher/he/class";

const store = ClassStore();
const bascStore = classBasic();
const activeName = ref("first");
const count = ref(0);

onMounted(() => {
  splitPage(1, formInline).then((res) => {
    if (res.data.msg) {
      // console.log(res);

      store.getAll(res.data.data);
      count.value = res.data.count;
    }
  });
});

const handleClick = (tab: TabsPaneContext, event: Event) => {
  if (activeName.value == "first") {
    formInline.isCharge = 0;
    // console.log(formInline);

    splitPage(1, formInline).then((res) => {
      if (res.data.msg == "请求成功") {
        store.getFreeAll(res.data.data);
      }
    });
  } else {
    formInline.isCharge = 1;
  }
};

// 搜索
const formInline = reactive({
  className: "",
  isCompilation: null,
  isShelves: null,
  isCharge: 1,
});
// 搜索
const onSubmit = () => {
  splitPage(1, formInline).then((res) => {
    console.log(res);

    if (res.data.msg == "请求成功") {
      console.log(formInline);

      if (formInline.isCharge == 1) {
        store.getAll(res.data.data);
        // console.log(store.tableData);
      } else {
        store.getFreeAll(res.data.data);
      }

      count.value = res.data.data.length;
    }
  });
};

// 创建课程
const addClick = () => {
  // console.log("addClick");
  bascStore.type = "0"; //0为创建课程
  bascStore.clearClass();
  router.push("/CreateClass");
};

// 详情
const goClassDetail = (id: number) => {
  router.push({
    path: `/ClassDetail/`,
    query: { id: id },
  });
};

// 分页

const currentPage3 = ref(1);
const pageSize3 = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  // console.log(val);

  if (activeName.value == "first") {
    splitPage(val, formInline).then((res) => {
      if (res.data.msg) {
        // console.log(res);

        store.getAll(res.data.data);
        count.value = res.data.count;
      }
    });
  } else {
    splitPage(val, formInline).then((res) => {
      if (res.data.msg == "请求成功") {
        store.getFreeAll(res.data.data);
      }
    });
  }
};
</script>

<template>
  <div class="myclass">
    <div class="common-layout">
      <el-container>
        <el-header class="title"> 课程管理 </el-header>
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="收费课" name="first">
            <el-main>
              <div class="search">
                <el-form
                  :inline="true"
                  :model="store.searchInfo"
                  class="demo-form-inline"
                >
                  <el-form-item>
                    <el-input
                      v-model="formInline.className"
                      placeholder="请输入课程名称"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-select
                      v-model="formInline.isShelves"
                      placeholder="是否上架"
                      clearable
                    >
                      <el-option label="是" value="1" />
                      <el-option label="否" value="0" />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-select
                      v-model="formInline.isCompilation"
                      placeholder="是否合集"
                      clearable
                    >
                      <el-option label="是" value="1" />
                      <el-option label="否" value="0" />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="addClick"
                      >创建课程</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>

              <div class="result">
                <el-table :data="store.tableData" border style="width: 100%">
                  <el-table-column
                    prop="className"
                    label="课程名称"
                    width="250"
                  />

                  <el-table-column label="创建时间" width="250">
                    <template #default="scope">{{
                      getHMS(scope.row.createTime)
                    }}</template>
                  </el-table-column>

                  <el-table-column
                    label="是否上架"
                    width="100"
                    #default="scope"
                  >
                    <template v-if="scope.row.isShelves == 1">是</template>
                    <template v-else-if="scope.row.isShelves == 0">否</template>
                  </el-table-column>
                  <el-table-column
                    label="是否合集"
                    width="100"
                    #default="scope"
                  >
                    <template v-if="scope.row.isCompilation == 1">是</template>
                    <template v-else-if="scope.row.isCompilation == 0"
                      >否</template
                    >
                  </el-table-column>
                  <el-table-column label="视频数量" width="100" prop="videoNum">
                  </el-table-column>

                  <!-- <el-table-column
                    prop="enlistsNum"
                    label="报名人数"
                    width="100"
                  /> -->
                  <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                      <el-button
                        link
                        type="primary"
                        size="small"
                        @click="goClassDetail(scope.row.id)"
                        >详细</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-main></el-tab-pane
          >

          <!-- 免费课 -->
          <el-tab-pane label="免费课" name="second">
            <el-main>
              <div class="search">
                <el-form
                  :inline="true"
                  :model="store.searchInfo"
                  class="demo-form-inline"
                >
                  <el-form-item>
                    <el-input
                      v-model="formInline.className"
                      placeholder="请输入课程名称"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-select
                      v-model="formInline.isShelves"
                      placeholder="是否上架"
                      clearable
                    >
                      <el-option label="是" value="1" />
                      <el-option label="否" value="0" />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-select
                      v-model="formInline.isCompilation"
                      placeholder="是否合集"
                      clearable
                    >
                      <el-option label="是" value="1" />
                      <el-option label="否" value="0" />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="addClick"
                      >创建课程</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>

              <div class="result">
                <el-table :data="store.Data" border style="width: 100%">
                  <el-table-column
                    prop="className"
                    label="课程名称"
                    width="250"
                  />

                  <el-table-column label="创建时间" width="250">
                    <template #default="scope">{{
                      getHMS(scope.row.createTime)
                    }}</template>
                  </el-table-column>

                  <el-table-column
                    label="是否上架"
                    width="100"
                    #default="scope"
                  >
                    <template v-if="scope.row.isShelves == 1">是</template>
                    <template v-else-if="scope.row.isShelves == 0">否</template>
                  </el-table-column>
                  <el-table-column
                    label="是否合集"
                    width="100"
                    #default="scope"
                  >
                    <template v-if="scope.row.isCompilation == 1">是</template>
                    <template v-else-if="scope.row.isCompilation == 0"
                      >否</template
                    >
                  </el-table-column>
                  <el-table-column label="视频数量" width="100" prop="videoNum">
                  </el-table-column>

                  <!-- <el-table-column
                    prop="enlistsNum"
                    label="报名人数"
                    width="100"
                  /> -->
                  <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                      <el-button
                        link
                        type="primary"
                        size="small"
                        @click="goClassDetail(scope.row.id)"
                        >详细</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-main>
          </el-tab-pane>
        </el-tabs>
        <div class="demo-pagination-block">
          <el-pagination
            v-model:current-page="currentPage3"
            v-model:page-size="pageSize3"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="prev, pager, next, jumper"
            :total="count"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-container>
    </div>
  </div>
</template>

<style scoped>
.myclass .demo-form-inline .el-input {
  --el-input-width: 220px;
}
.myclass .search {
  display: flex;
  justify-content: space-between;
}
.myclass.title {
  margin-left: 0;
  line-height: 55px;
  box-shadow: 0px 2px 0px 3px #f5f7fa;
}

.myclass .demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.myclass #tab-first {
  margin-left: 30px;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
